<template>
	<view>
		<cu-custom :isBack="true" :bgColor="'bg-'+theme">
			<block slot="backText"></block>
			<block slot="content"><text>渠道佣金</text></block>
		</cu-custom>
		<view class="app-container">
			<view class="bg-arc">
				<view class="bgcolor" :class="'bg-'+theme"></view>
			</view>
			<view class="app-body ">
				<view class="text-white text-center">
					<view class="text-xxl margin-top">
						{{statistics?statistics.accumulate_integral:0}}
					</view>
					<view class="">总收益</view>
				</view>
				<view class="margin radius overflow">
					<scroll-view scroll-x class="bg-white nav solid-bottom">
						<view class="flex text-center">
							<view class="cu-item flex-sub text-cut" :class="index==TabCur?'text-orange cur':''" v-for="(item,index) in tabs"
							 :key="index" @tap="tabSelect" :data-id="index">
								{{item.name}}({{item.count}})
							</view>
						</view>
					</scroll-view>

					<view v-for="(tab, i) in tabs" :key="i" v-if="i==TabCur" >
						<block v-if="tab.group_type == 2">
							<view class="cu-list menu-avatar">
								<!-- <view class="w100 padding-tb solid-bottom" >
									<view class="space-between margin-lr align-center" v-for="(goods, i) in item.order.goods" :key="i">
										<view class="bg-gray goods-thumb">
											<image :src="goods.goods_image" mode="aspectFill"></image>
										</view>
										<view class="w100 margin-left-sm">
											<view class="text-lg margin-bottom">{{goods.goods_name}}</view>
											<view><text class="text-price text-red">{{goods.goods_price}}</text><text class="margin-left-sm">x{{goods.goods_num}}</text></view>
										</view>
									</view>
								</view> -->
								<view class="cu-item" v-for="(item,index) in tab.list" :key="index" >
									<view class="cu-avatar lg bg-white round">
										<image v-if="item.order && item.order.member.head_portrait" :src="item.order.member.head_portrait" mode="aspectFill"></image>
										<image v-else src="https://gsconline-1251028293.cos.ap-guangzhou.myqcloud.com/images/2020/05/19/image_158987220710257979.png" mode="aspectFill"></image>
									</view>
									<view class="content">
										<view v-if="item.order"><text class="text-bold">{{item.order.member.realname}}({{item.order.member.id}})</text><text class="cu-tag sm bg-orange round">{{item.order.member.level.name}}</text></view>
										<view class="text-gray text-left">{{$common.timeFormat(item.created_at,'YYYY-MM-DD h:m:s')}}</view>
									</view>
									<view class="action">
										<view class="text-orange text-sm">{{item.remark}}</view>
										<view class="text-orange">+{{parseInt(item.num)}}</view>
									</view>
								</view>
							</view>
						</block>
						<block v-else>
							<view class="cu-list menu-avatar">
								<view class="cu-item" v-for="(item,index) in tab.list" :key="index">
									<view class="cu-avatar lg bg-white round">
										<image v-if="item.map && item.map.head_portrait" :src="item.map.head_portrait" mode="aspectFill"></image>
										<image v-else src="https://gsconline-1251028293.cos.ap-guangzhou.myqcloud.com/images/2020/05/19/image_158987220710257979.png" mode="aspectFill"></image>
									</view>
									<view class="content">
										<view v-if="item.map"><text class="text-bold">{{item.map.realname}}({{item.map.id}})</text><text class="cu-tag sm bg-orange round">{{item.map.level.name}}</text></view>
										<view class="text-gray text-left">{{$common.timeFormat(item.created_at,'YYYY-MM-DD h:m:s')}}</view>
									</view>
									<view class="action">
										<view class="text-orange text-sm">{{item.remark}}</view>
										<view class="text-orange">+{{parseInt(item.num)}}</view>
									</view>
								</view>
							</view>
						</block>
						<view class="cu-load margin-center" :class="tab.loading?'loading':'over'"></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				CLOUDPATH: this.$config.cloudPath,
				theme: this.$config.THEME(),
				statistics: null,
				TabCur: 0,
				tabs: [{
					name: "报单收益",
					group_type: 1,
					count: 0,
					list: [],
					page: 1,
					hasMore: true,
					loading: false
				}, {
					name: "商城收益",
					group_type: 2,
					count: 0,
					list: [],
					page: 1,
					hasMore: true,
					loading: false
				}],
			}
		},
		onLoad(options) {
			if (this.$common.loginAuth(true)) {
				let statictics = this.$common.getCache('credit_statictics')
				if (!statictics) {
					this.$nextTick((r) => {
						uni.startPullDownRefresh({})
					})
				} else {
					this.statistics = statictics
					this.tabs[0].count = this.statistics.credits_declaration
					this.tabs[1].count = this.statistics.credits_shop
					if (this.tabs[2]) {
						this.tabs[2].count = this.statistics.credits_company
					}
				}
				this.getList(this.TabCur)
			}
		},
		onShow() {},
		methods: {
			tabSelect(e) {
				if (this.TabCur != e.currentTarget.dataset.id) {
					this.TabCur = parseInt(e.currentTarget.dataset.id)
					this.getList(this.TabCur)
				}
			},
			getInfo() {
				this.$http
					.get('integral_info', {})
					.then((response) => {
						this.statistics = response.data.data
						this.$common.setCache('credit_statictics', this.statistics, 10 * 60)

						this.tabs[0].count = this.statistics.credits_declaration
						this.tabs[1].count = this.statistics.credits_shop
						if (this.tabs[2]) {
							this.tabs[2].count = this.statistics.credits_company
						}
						uni.hideLoading()
						uni.stopPullDownRefresh()
					})
					.catch((response) => {
						console.log(response)
					})
			},
			getList(index) {
				let obj = this.tabs[index]
				if (obj.hasMore) {
					this.tabs[index].loading = true
					this.$http
						.get('integral_details', {
							page: obj.page,
							group_type: obj.group_type
						})
						.then((response) => {
							let list = obj.list
							if (response.data.data.length > 0) {
								list = list.concat(response.data.data)
							} else {
								this.tabs[index].hasMore = false
							}
							this.tabs[index].list = list
							this.tabs[index].loading = false
							this.tabs[index].page += 1
						})
						.catch((response) => {
							console.log(response)
							this.tabs[index].loading = false
						})
				}
			},
		},
		onReachBottom() {
			this.getList(this.TabCur)
		},
		onPullDownRefresh() {
			this.getInfo()
			this.tabs[this.TabCur].list = []
			this.tabs[this.TabCur].hasMore = true
			this.tabs[this.TabCur].page = 1
			this.tabs[this.TabCur].loading = false
			this.getList(this.TabCur)
		},
	}
</script>

<style>
</style>
